<template>
    <div class="w-full h-full box-border flex flex-col overflow-y-hidden">
        <header class="flex-none block">
            <h5 class="h-[76px] flex flex-row items-center text-primary text-2xl font-bold">智聘职位</h5>
            <section class="flex flex-row justify-between items-center pb-[10px]">
                <a-flex align="center" :gap="10">
                    <div v-for="option in stateOptions" :key="option.value"
                        class="flex flex-row items-center h-10 text-nowrap rounded-[6px] border border-solid border-[#CED4DB] text-primary hover:text-theme text-sm px-6 touchable-opacity"
                        :class="formState.state === option.value ? 'bg-theme !text-white' : ''"
                        @click="handleStateChange(option.value)"
                    >
                        {{ option.label }}
                    </div>
                </a-flex>
                <a-flex align="center" :gap="10">
                    <a-select class="fuck-select-nobg" style="width: 140px;" size="large" placeholder="所属部门" :options="depOptions" :loading="depLoading" allow-clear v-model:value="formState.departmentId" @change="refresh()" />
                    <a-select class="fuck-select-nobg" style="width: 140px;" size="large" placeholder="招聘HR" :options="publishUserOptions" :loading="publishUserLoading" allow-clear v-model:value="formState.publishUserId" @change="refresh()" />
                    <GpSearchInput placeholder="请输入要搜索的内容" class-name="search-input" v-model:value="formState.name" @search="refresh()" />
                    <a-button type="primary" size="large" @click="$router.push({name: 'JobPublishPage'})">
                        <GpFontIcon name="icon-tianjia" />
                        发布职位
                    </a-button>
                </a-flex>
            </section>
        </header>
        <main class="flex-1 overflow-y-auto py-[10px]">
            <ul class="gap-4 list-cards" v-if="dataSource.length > 0">
                <li class="bg-white relative rounded-xl cursor-pointer flex-none list-card"
                    v-for="item in dataSource" :key="item.id"
                >
                    <section class="job-state " :class="stateMap.get(item.state)!.cls">
                        {{ stateMap.get(item.state)!.label }}
                    </section>
                    <section class="flex flex-row justify-between items-center pt-6 pr-4 pb-4 pl-6">
                        <div class="box-border">
                            <h5 class="text-primary text-xl font-bold">{{item.name}}</h5>
                            <a-space class="text-secondary text-sm mt-[2px]" align="center">
                                <template #split>
                                    <div class="w-px h-2 bg-[#ACAEB2]"></div>
                                </template>
                                <span v-if="item.publishUserName">{{item.publishUserName}}</span>
                                <span v-if="item.educationDisplay">{{item.educationDisplay.includes('不限') ? '学历不限' : item.educationDisplay}}</span>
                                <span v-if="item.experienceDisplay">{{item.experienceDisplay.includes('不限') ? '经验不限' : item.experienceDisplay}}</span>
                                <span v-if="item.regionName">{{item.regionName}}</span>
                            </a-space>
                        </div>
                        <a-dropdown placement="bottomRight">
                            <template #overlay>
                                <a-menu @click="handleMenuAction(item, $event)">
                                    <a-menu-item key="switch">
                                        {{ item.state === EnumJobState.招聘中 ? '关闭岗位' : '开放岗位' }}
                                    </a-menu-item>
                                </a-menu>
                            </template>
                            <GpFontIcon name="icon-gengduo1" class="cursor-pointer text-[#ACAEB2] hover:text-theme !text-xl !leading-5" />
                        </a-dropdown>
                    </section>
                    <section class="pb-4 px-5 box-border">
                        <div class="relative h-[146px]">
                            <div class="border border-solid border-[#EEEEEE] rounded-xl h-full list-card-frame"></div>
                            <div class="absolute inset-0 py-4">
                                <a-flex justify="space-between" class="px-10">
                                    <a-flex vertical justify="center" align="center" :gap="2">
                                        <span class="text-theme text-lg !leading-[28px] font-bold">121</span>
                                        <span class="text-secondary text-sm !leading-5">AI打招呼</span>
                                    </a-flex>
                                    <a-flex vertical justify="center" align="center" :gap="2">
                                        <span class="text-theme text-lg !leading-[28px] font-bold">21</span>
                                        <span class="text-secondary text-sm !leading-5">有效沟通</span>
                                    </a-flex>
                                    <a-flex vertical justify="center" align="center" :gap="2">
                                        <span class="text-theme text-lg !leading-[28px] font-bold">23</span>
                                        <span class="text-secondary text-sm !leading-5">匹配成功</span>
                                    </a-flex>
                                </a-flex>
                                <section class="mt-5 px-4">
                                    <a-flex justify="space-between" align="center">
                                        <span class="text-sm font-medium">招聘中...</span>
                                        <span class="text-sm text-secondary">
                                            <span class="text-theme">121</span>
                                            <span>/200</span>
                                        </span>
                                    </a-flex>
                                    <div class="relative mt-[11px] h-[6px] bg-[#EEEEEE] rounded-[3px]">
                                        <div class="w-1/2 bg-linear-90 from-[#00AAFF] from-0% to-theme to-100% h-full rounded-[inherit]"></div>
                                        <img src="/images/ai-chat.png" alt="progress-icon" :width="20" :height="20" class="size-5 object-cover absolute left-1/2 -top-[7px]"/>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </section>
                    <section class="bg-theme/4 h-[54px] flex flex-row items-stretch">
                        <RouterLink :to="{ name: 'AIChatPage' }" class="touchable-opacity text-secondary text-sm hover:text-theme leading-[54px] text-center flex-1">查看沟通记录</RouterLink>
                        <div class="w-px h-5 bg-[#EEEEEE] self-center"></div>
                        <RouterLink :to="{ name: 'JobPublishPage', query: { id: item.id } }" class="touchable-opacity text-secondary text-sm hover:text-theme leading-[54px] text-center flex-1">AI职位配置</RouterLink>
                    </section>
                </li>
            </ul>
            <GpEmpty v-else src="/images/empty-novideo.png" description="暂无内容，快去添加吧~"
            img-class="w-[300px] h-[260px]" class="mt-[160px]" />
        </main>
        <footer class="flex-none flex flex-row items-center justify-end h-15">
            <a-pagination class="!ml-auto" :current="pagination.current" :pageSize="pagination.pageSize"
                show-quick-jumper :total="total" show-less-items show-size-changer @change="handlePaginationChange" :page-size-options="['12','20','28','32']" />
        </footer>
    </div>
</template>
<script lang="ts" setup>
import { postJobCompletejobs, postJobGetjobpage, postJobResumejobs } from '@/api/siderBar/job';
import { EnumJobState, type JobQueryRequestPageSearchRequest, type JobResumeResult } from '@/api/siderBar/model';
import { getSettingGetdepartments, getSettingGetinterviewers } from '@/api/siderBar/setting';
import { useAppStore } from '@/stores';
import { message } from 'ant-design-vue';

defineOptions({
    name: 'JobPositionPage'
})
definePage({
    name: 'JobPositionPage',
    meta: {
        title: '智聘职位',
        isLayout: false
    }
})
type FormState = JobQueryRequestPageSearchRequest['search']
const appStore = useAppStore()
const stateMap = new Map<EnumJobState, {label: string; cls: string;}>([
    [EnumJobState.招聘中, { label: '招聘中', cls: 'processing' }],
    [EnumJobState.已结束, { label: '已关闭', cls: 'closed' }]
])
const stateOptions = ref<IOption<EnumJobState | typeof AllValue>[]>([
    { value: AllValue, label: '全部' },
    { value: EnumJobState.招聘中, label: stateMap.get(EnumJobState.招聘中)!.label },
    { value: EnumJobState.已结束, label: stateMap.get(EnumJobState.已结束)!.label },
]);
const formState = ref(getInitialState())
const { data: depOptions, loading: depLoading } = useRequest(() => getSettingGetdepartments(), {
    initialData: []
})
const { data: publishUserOptions, loading: publishUserLoading } = useRequest(() => getSettingGetinterviewers({}), {
    initialData: []
})
const { dataSource, loading, pagination, refresh, refreshCurrent, total, handlePaginationChange } =
    useTablePaginationRequest(formState, postJobGetjobpageFetcher, {
        onSuccess({ extendData }) {
            const { states } = extendData!
            const realStates = states.filter(state => state.label !== '全部')
            stateOptions.value.forEach(option => {
                const realState = realStates.find(l => l.value === option.value)
                if (realState)
                    option.count = realState.count
            })
            stateOptions.value[0].count = states.find(state => state.label === '全部')!.count
        },
        defaultParams: [
            {
                current: 1,
                pageSize: 12,
            }
        ]
    });
function postJobGetjobpageFetcher(
    data: JobQueryRequestPageSearchRequest,
) {
    const search = Object.assign({}, data.search)
    if (<number>search.state === AllValue) {
        // @ts-ignore
        delete search.state
    }
    return postJobGetjobpage({
        ...data,
        search,
    }).then(res => normalizePaginationData(res, { current: data.page.pageIndex, pageSize: data.page.pageSize }));
}
function getInitialState(): FormState {
    return {
        // @ts-ignore
        state: AllValue
    }
}
function handleStateChange(val: number) {
    if (val === toValue(formState).state) return
    formState.value.state = val
    refresh()
}
async function handleMenuAction(item: JobResumeResult, {key}: {key: unknown}) {
    if (key === 'switch') {
        const action = item.state === EnumJobState.招聘中 ? postJobCompletejobs : postJobResumejobs
        try {
            await action({ids: [item.id]})
            message.success('操作成功')
            refreshCurrent()
        } catch (error) {
            console.log(error)
        }
    }
}
useEffectScope(() => {
    watch(loading, () => {
        appStore.toggleLoading(loading.value)
    })
})
</script>
<style lang="less" scoped>
.search-input {
    width: 280px;
    height: 40px;
}
.list-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(414px, 1fr));
}
.list-card {
    width: 100%;
    box-shadow: 0 4px 20px 0 #2e294d0f;
    transition: .15s;
    &:hover {
        transform: translate3d(0, -10px, 10px);
    }
    .list-card-frame {
        mask: linear-gradient(to bottom, rgba(255,255, 255, 1), rgba(255,255, 255, 0)) no-repeat;
    }
    .job-state {
        position: absolute;
        top: 0;
        right: 0;
        width: 78px;
        height: 28px;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        font-size: 13px;
        padding-inline: 8px;
        background-repeat: no-repeat;
        background-size: cover;
        &.processing {
            color: #0DAF7B;
            background-image: url(/images/job-processing.png);
        }
        &.closed {
            color: var(--color-third);
            background-image: url(/images/job-closed.png);
        }
    }
}
@media screen and (max-width: 1200px) {
    .search-input {
        width: 200px;
    }
    .list-cards {
        grid-template-columns: repeat(3, minmax(347px, 1fr));
    }
}
</style>